import React, { useState, useEffect } from "react";
import { Form, Button, Input, Toast } from "antd-mobile/2x";
import { useHistory } from "react-router-dom";
import api from "../../api/user";

export default function Login() {
    const [num, setNum] = useState(0);
    const [tel, setTel] = useState("");
    const { push } = useHistory();
    useEffect(() => {
        if (!num > 0) return;
        let time = setTimeout(() => {
            setNum(num - 1)
        }, 1000);
        return () => {
            time = null;
            clearTimeout(time)
        }
    }, [num])
    const onFinish = (values) => {
        console.log(values);
        api.login({ ...values }).then(res => {
            if (res.success) {
                Toast.show({
                    content: "登录成功"
                });
                localStorage.setItem("token", res.data.token);
                localStorage.setItem("user", JSON.stringify(res.data.userData))
                push("/")
            } else {
                Toast.show({
                    content: res.msg
                })
            }
        })

    };
    return (
        <div>
            {" "}
            <img style={{ width: "100%", height: "100%" }} src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20200401%2Fa8efce93b99a4933a35aa33b2e05c608.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642938973&t=d57d781e0a4464b7ab8468b3ccf97552" alt="" />
            <Form
                onFinish={onFinish}
                layout="horizontal"
                footer={
                    <Button block type="submit" color="primary">
                        登录
                    </Button>
                }
            >
                <Form.Item
                    name="tel"
                    label="电话号"
                    rules={[{ required: true, message: "电话号不能为空" }, {
                        message: "请输入正确的手机号",
                        validateTrigger: "blur",
                        pattern: /^1[3-9]\d{9}$/,
                    }]}
                >
                    <Input placeholder="请输入姓名" value={tel} onChange={(e) => setTel(e)} />
                </Form.Item>
                <Form.Item
                    name="verification"
                    label="验证码"
                    rules={[{ required: true, message: "账号不能为空" }]}
                >
                    <div style={{ display: "flex", alignItems: "center" }}>
                        <Input placeholder='请输入验证码' clearable style={{ flex: "1" }} />
                        <Button color='primary' fill='none' type="button" disabled={num !== 0} style={{ padding: "0" }} onClick={(val) => {
                            if (tel.match(/^1[3-9]\d{9}$/)) {
                                api.getCode({ tel }).then(res => {
                                    if (res.success) {
                                        Toast.show({
                                            position: 'top',
                                            content: res.data.verification,
                                            duration: 5000,
                                        })
                                        setNum(60)
                                    }

                                })
                            } else {
                                Toast.show({
                                    content: "请输入正确的手机号",
                                    icon: "fail"
                                })
                            }


                        }}>
                            {num === 0 ? "发送验证码" : "下次验证" + num + "秒后"}
                        </Button>
                    </div>

                </Form.Item>

            </Form>
        </div >
    );
}

